<!-- stories/templates/stories/login.html -->
{% extends 'stories/base.html' %}
{% load static %}

{% block title %}登录 - AI故事生成网站{% endblock %}

{% block content %}
<div class="container">
    <div class="auth-container">
        <div class="auth-form">
            <div class="auth-header">
                <h1>登录</h1>
                <p>使用用户名或邮箱登录</p>
            </div>

            <form method="post" id="loginForm">
                {% csrf_token %}

                <div class="form-group">
                    <label for="username">用户名或邮箱</label>
                    <input type="text" name="username" id="username" required>
                    <div id="userTypeHint" class="user-type-hint"></div>
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" name="password" id="password" required>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">登录</button>
                </div>

                <div class="auth-links">
                    <p>还没有账号？<a href="{% url 'stories:register' %}">立即注册</a></p>
                    <p><a href="#">忘记密码？</a></p>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 用户名输入框失去焦点时检查用户类型
    $('#username').on('blur', function() {
        var username = $(this).val().trim();
        var hintDiv = $('#userTypeHint');
        
        // 清空之前的提示
        hintDiv.removeClass('user-exists admin-user normal-user user-not-exists').text('');
        
        if (username) {
            // 发送AJAX请求检查用户类型
            $.ajax({
                url: '{% url "stories:check_user_type" %}',
                method: 'GET',
                data: {
                    'username': username
                },
                success: function(response) {
                    if (response.exists) {
                        if (response.is_admin) {
                            hintDiv.addClass('admin-user').text('管理员账户');
                        } else {
                            hintDiv.addClass('normal-user').text('普通用户账户');
                        }
                    } else {
                        hintDiv.addClass('user-not-exists').text('用户不存在');
                    }
                },
                error: function() {
                    // 静默失败，不显示错误
                }
            });
        }
    });
    
    // 表单提交时检查用户是否存在
    $('#loginForm').on('submit', function(e) {
        var username = $('#username').val().trim();
        var hintDiv = $('#userTypeHint');
        
        if (username && hintDiv.hasClass('user-not-exists')) {
            e.preventDefault();
            alert('用户不存在，请检查用户名或邮箱是否正确');
            return false;
        }
    });
});
</script>
{% endblock %}